<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webGl No5</title>
    <script src="js/three73.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/dat.gui.js"></script>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>
    <div id="Stats-output"></div>
    <script>
       window.onload = function () {
           var stats = initStats(); //调用stat函数
           var scene = new THREE.Scene(); //定义场景
           var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //定义相机

           //定义渲染器
           var renderer = new THREE.WebGLRenderer();
           renderer.setClearColor(0xEEEEEE);
           renderer.setSize(window.innerWidth,window.innerHeight);

           renderer.shadowMapEnabled = true;
           renderer.shadowMapSoft = true; //软阴影

            //创建一个坐标轴
           var axex = new THREE.AxisHelper(20);
           scene.add(axex);

           //创建一个光源
           var spotLight = new THREE.SpotLight(0xffffff);
           spotLight.position.set(-40,60,20);
           spotLight.castShadow = true;  //该光源能产生阴影
           scene.add(spotLight);
           //创建一个环境光源
           var ambientLight = new THREE.AmbientLight(0x333333);
           scene.add(ambientLight);

           var texture1 = THREE.ImageUtils.loadTexture('images/1.jpg');
           var texture2 = THREE.ImageUtils.loadTexture('images/2.jpg');
           var texture3 = THREE.ImageUtils.loadTexture('images/1.jpg');
           texture3.wrapS = texture3.wrapT = THREE.RepeatWrapping;
           texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
           texture3.repeat.set(8, 8);
           texture2.repeat.set(1, 8);

           //创建一个平面
           var planeGeometry = new THREE.PlaneGeometry(30,20,1,1);
           var planeMeterial = new THREE.MeshLambertMaterial({map: texture3});
           var plane = new THREE.Mesh(planeGeometry,planeMeterial);

           //定义平面的位置
           plane.rotation.x = -0.5*Math.PI;
           plane.position.x = 0;
           plane.position.y = -1;
           plane.position.z = 0;
           plane.receiveShadow = true;//接受阴影
           scene.add(plane);

           //创建5个方块
           var cubeGeometry1 = new THREE.CubeGeometry(10,1,8);
           var cubeGeometry2 = new THREE.CubeGeometry(10,6,1);
           var cubeGeometry3 = new THREE.CubeGeometry(1,6,8);
           var cubeMaterial = new THREE.MeshLambertMaterial({map: texture1});
           var cube1 = new THREE.Mesh(cubeGeometry1,cubeMaterial);
           var cube2 = new THREE.Mesh(cubeGeometry2,cubeMaterial);
           var cube3 = new THREE.Mesh(cubeGeometry2,cubeMaterial);
           var cube4 = new THREE.Mesh(cubeGeometry3,cubeMaterial);
           var cube5 = new THREE.Mesh(cubeGeometry3,cubeMaterial);
           var cubeGroup = new THREE.Object3D();
           cubeGroup.add(cube1,cube2,cube3,cube4,cube5);

           cube1.position.set(-4,1.5,0);
           cube2.position.set(-4,4,3.5);
           cube3.position.set(-4,4,-3.5);
           cube4.position.set(-8.5,4,0);
           cube5.position.set(0.5,4,0);

           cubeGroup.castShadow = true; //投射阴影
           scene.add(cubeGroup);

           //创建四个圆环
           var torusGeometry = new THREE.TorusGeometry(1,0.5,12,18);
           var torusMeterial = new THREE.MeshLambertMaterial({map: texture2});
           var torus1 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus2 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus3 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus4 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torusGroup =  new THREE.Object3D();
           torusGroup.add(torus1,torus2,torus3,torus4);
           var group=[torus1,torus2,torus3,torus4];
         /*  var carGroup = new THREE.Object3D();*/
         /*  carGroup.add(cube1,cube2,cube3,cube4,cube5,torus1,torus2,torus3,torus4);*/

           torus1.position.set(-7,0.4,4);
           torus1.castShadow = true; //投射阴影
           torus1.receiveShadow = true;

           torus2.position.set(-1,0.4,4);
           torus2.castShadow = true;
           torus2.receiveShadow = true;

           torus3.position.set(-7,0.4,-4);
           torus3.castShadow = true;
           torus3.receiveShadow = true;

           torus4.position.set(-1,0.4,-4);
           torus4.castShadow = true;
           torus4.receiveShadow = true;

           scene.add(torusGroup);
          /* scene.add(carGroup);*/

           //输出到页面
           var webgl = document.getElementById('WebGL-output');
           webgl.appendChild(renderer.domElement);

           var controls = new function(){
               this.Darkness = 0.5;
               this.cameraPX = -30;
               this.cameraPY = 30;
               this.cameraPZ = 30;
           };

           var gui = new dat.GUI();
           gui.add(controls,'Darkness',0,1);
           gui.add(controls,'cameraPX',-100,100);
           gui.add(controls,'cameraPY',-100,100);
           gui.add(controls,'cameraPZ',-100,100);

           var step = 0.03;

           renderScene();

           function renderScene(){
               stats.update(); //实时更新

               spotLight.shadowDarkness = controls.Darkness;
               camera.position.x = controls.cameraPX;
               camera.position.y = controls.cameraPY;
               camera.position.z = controls.cameraPZ;
               camera.lookAt(scene.position);

               requestAnimationFrame(renderScene);
               renderer.render(scene,camera);
           }

           function initStats(){  //初始化函数，定义具体位置
               var stats = new Stats();
               stats.setMode(0);
               stats.domElement.style.position = 'absolute';
               stats.domElement.style.left = '0px';
               stats.domElement.style.top = '0px';
               document.getElementById('Stats-output').appendChild(stats.domElement);
               return stats;
           }

           function showkey(){
               key = event.keyCode;
               if(key == 87 || key == 38){  //前进
                   setTimeout(function () {
                       cubeGroup.position.x += Math.cos(torusGroup.rotation.y % (2 * Math.PI));
                       torusGroup.position.x += Math.cos(torusGroup.rotation.y % (2 * Math.PI));
                       cubeGroup.position.z -= Math.sin(torusGroup.rotation.y % (2 * Math.PI));
                       torusGroup.position.z -= Math.sin(torusGroup.rotation.y % (2 * Math.PI));
                       group[1].rotation.y = group[0].rotation.y ;
                       group[3].rotation.y = group[0].rotation.y;
                   },100);
                   for(var i = 0;i<group.length;i++){
                       output(i)
                   }
                   function output(i) {
                       group[i].rotation.z -= 0.1*Math.PI;
                   }
               }else if(key == 83 || key == 40){  //后退
                   setTimeout(function () {
                       cubeGroup.position.x -= Math.cos(torusGroup.rotation.y % (2 * Math.PI));
                       torusGroup.position.x -= Math.cos(torusGroup.rotation.y % (2 * Math.PI));
                       cubeGroup.position.z += Math.sin(torusGroup.rotation.y % (2 * Math.PI));
                       torusGroup.position.z += Math.sin(torusGroup.rotation.y % (2 * Math.PI));
                       group[1].rotation.y = group[0].rotation.y;
                       group[3].rotation.y = group[0].rotation.y;
                   },100);
                   for(var i = 0;i<group.length;i++){
                       output2(i)
                   }
                   function output2(i) {
                       group[i].rotation.z += 0.1*Math.PI;
                   }
               }else if(key == 65 || key == 37){  //向左
                   if(group[1].rotation.y <= 0.4){
                       group[1].rotation.y = torusGroup.rotation.y+0.01;
                       group[3].rotation.y = torusGroup.rotation.y+0.01;
                       console.log(group[1].rotation.y)
                   }
                   torusGroup.rotation.y += step;
                   cubeGroup.rotation.y += step;
                   for(var i = 0;i<group.length;i++){
                       output2(i)
                   }
                   function output2(i) {
                       group[i].rotation.z += 0.1*Math.PI;

                   }
               }else if(key == 68 || key == 39){   //向右
                   torusGroup.rotation.y -= step;
                   if(group[1].rotation.y >= -0.4) {
                       group[1].rotation.y = (torusGroup.rotation.y - 0.01);
                       group[3].rotation.y = (torusGroup.rotation.y - 0.01);
                   }
                   console.log(group[1].rotation.y )
                   cubeGroup.rotation.y -= step;
                   for(var i = 0;i<group.length;i++){
                       output2(i)
                   }
                   function output2(i) {
                       group[i].rotation.z += 0.1*Math.PI;

                   }
               }
           }
           document.onkeydown=showkey;
       }
    </script>
</body>
</html>